<template>
  <div ref="node" :style="nodeStyle" class="common-node">
    <div class="common-node-normal">
      <div class="common-node-header">
        {{ title }}
      </div>
      <div class="common-node-footer">
        <span class="iconfont">&#xe8a7;</span>
      </div>
    </div>
    <div class="common-node-action">
      <div>
        <div>
          <a-button size="small" shape="round" ghost type="primary" @click="editForm">修改表单</a-button>
        </div>
        <div>
          <a-button size="small" shape="round" ghost type="primary" @click="selectForm">转为中心表</a-button>
        </div>
      </div>
      <a style="user-select: none"><span class="iconfont common-node-action-icon">&#xe711;</span></a>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {openWindow} from '@/utils/WindowUtils';

export default {
  name: 'CommonNode',
  props: {
    node: createProps(Object, () => ({
      key: undefined,
      title: undefined
    })),
    title: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      width: 0,
      height: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.width = this.$refs.node.offsetWidth || 130;
      this.height = this.$refs.node.offsetHeight || 50;
    });
  },
  methods: {
    selectForm() {
      this.$emit('selectForm', this.node.key);
    },
    editForm() {
      openWindow(() => ['components/hhd/design/FormManager/FormManager', {
        props: {
          formId: this.node.key
        }
      }], {
        title: `编辑 - ${this.node.title}`,
        key: `editFormDefinition`,
        close: () => {
          this.loadFormList();
        }
      });
    },
  },
  computed: {
    nodeStyle() {
      return {
        transform: `translate(${-this.width / 2}px,${-this.height / 2}px)`
      };
    },
  }
};
</script>
<style>
.common-node {
  background: white;
  border-radius: 100px;
  min-width: 130px;
  box-shadow: 0 0 8px rgba(31, 133, 236, 1);
  z-index: 2;
  position: absolute;
  padding: 0 10px;
  height: 50px;
}

.common-node:hover .common-node-normal {
  display: none;
}

.common-node-header {
  border-bottom: 1px dashed #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.common-node-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}


.common-node-action {
  height: 100%;
  display: none;
  align-items: center;
}

.common-node:hover .common-node-action {
  display: flex;
}

.common-node .common-node-action button {
  height: 20px;
}

.common-node-action .common-node-action-icon {
  font-size: 21px;
}
</style>